<template>
    <div>
        <Header></Header>
        <HeaderSearch></HeaderSearch>
        <div>
            <div class="crumb">
                <div class="w">
                    <div class="crumb-con">
                        <a class="link" href="./index">HappyLaiShop</a>
                        <span>>></span>
                        <span class="link-text">购物车列表</span>
                    </div>
                </div>
            </div>
            <div class="page-wrap w">
                <div class="cart-header">
                    <table class="cart-table">
                        <tr>
                            <th class="cart-cell cell-check">
                                <label class="cart-label">
                                    <input type="checkbox" v-model="allChecked" class="cart-select-all"  @change="allCheckedChange"/>
                                    <span>全选</span>
                                </label>
                            </th>
                            <th class="cart-cell cell-info">商品信息</th>
                            <th class="cart-cell cell-price">单价</th>
                            <th class="cart-cell cell-count">数量</th>
                            <th class="cart-cell cell-total">合计</th>
                            <th class="cart-cell cell-opera">操作</th>
                        </tr>
                    </table>
                </div>
                <div class="cart-list">
                    <table v-for="(item,i) in cartProductDtoList" class="cart-table" :data-product-id="item.id">
                        <tr>
                            <td class="cart-cell cell-check">
                                <label class="cart-label">
                                    <input type="checkbox" class="cart-select" @click="checkedProduct(item)" checked v-if="item.productChecked == 1"/>
                                    <input type="checkbox" class="cart-select" @click="checkedProduct(item)" v-if="item.productChecked == 0"/>
                                </label>
                            </td>
                            <td class="cart-cell cell-img">
                                <a class="link" v-bind:href="'./detail.html?productId='+item.productId">
                                    <img class="p-img" v-bind:src="item.productMainImage" :alt="item.productName" />
                                </a>
                            </td>
                            <td class="cart-cell cell-info">
                                <a class="link" href="">{{item.productName}}</a>
                            </td>
                            <td class="cart-cell cell-price">￥{{item.productPrice}}</td>
                            <td class="cart-cell cell-count">
                                <span class="count-btn minus" @click="cartUpdateCount(item, '-')">-</span>
                                <input class="count-input" :value="item.quantity" @change="changeCount($event, item)"/>  
                                <span class="count-btn plus" @click="cartUpdateCount(item, '+')">+</span>
                            </td>
                            <td class="cart-cell cell-total">￥{{item.productTotalPrice}}</td>
                            <td class="cart-cell cell-opera">
                                <span class="link cart-delete" @click="carDeleteProductByProductId(item.productId)">删除</span>
                            </td>
                        </tr>
                    </table>
                </div>
                <div class="cart-footer">
                    <div class="select-con">
                        <label>
                            <input type="checkbox" class="cart-select-all" v-model="allChecked" @change="allCheckedChange"/>
                            <span>全选</span>
                        </label>
                    </div>
                    <div class="delete-con">
                        <span class="link delete-selected">
                            <i class="fa fa-trash-o"></i>
                            <span @click="deleteSelected">删除选中</span>
                        </span>
                    </div>
                    <div class="submit-con">
                        <span>总价：</span>
                        <span class="submit-total">￥{{cartTotalPrice}}</span>
                        <span class="btn btn-submit" @click="createOrder">去结算</span>
                    </div>
                </div>
            </div>
        </div>
        <Footer></Footer>
    </div>
</template>

<script>
import { doCartList, doCartDeleteProduct, doCartSelectOrUnSelect, doCartUpdate, changeAllSelectedStatus} from '@/api/commonApi'
import Header from "@/views/layout/header.vue";
import Footer from "@/views/layout/footer.vue";
import HeaderSearch from '@/views/layout/header-search.vue';
export default {
    name: "index",
    components: {Header, Footer, HeaderSearch},
    data: function() {
      return {
        isLoading: false,
        cartTotalPrice: 0,
        cartProductDtoList: [],
        allChecked: false,
        selectedProductIds: []
      }
    },
    mounted: function(){
        doCartList().then((res) => {
            if(res.data.status === 200){
                this.listCartProduct(res)
            }
        })
    },
    methods: {
        createOrder(){
            if(this.selectedProductIds){
                this.$router.push("/order-confirm.html")
            } else {
                Toast.warning("请选择商品再提交");
            }
        },
        carDeleteProductByProductId(productId){
            doCartDeleteProduct({"productIds": productId}).then((res) => {
                if(res.data.status === 200){
                    this.listCartProduct(res)
                }
            })
        },
        deleteSelected(){
            doCartDeleteProduct({"productIds": this.selectedProductIds.join(',')}).then((res) => {
                if(res.data.status === 200){
                    this.listCartProduct(res)
                }
            })
        },
        checkedProduct(product){
            let newSelectedProductIds = [];
            if(product.productChecked === 1){
                for(let i = 0; i < this.selectedProductIds.length; i++){
                    if(this.selectedProductIds[i] !== product.productId){
                        newSelectedProductIds.push(this.selectedProductIds[i])
                    }
                }
                this.selectedProductIds = newSelectedProductIds
            } else {
                this.selectedProductIds.push(product.productId)
            }
            doCartSelectOrUnSelect({"productId": product.productId, "checked": product.productChecked == 1 ? 0 : 1}).then((res) => {
                if(res.data.status === 200){
                    this.listCartProduct(res)
                }
            })
        },
        cartUpdateCount(item, addMinType){
            let params = {
                "productId": item.productId,
                "count": (addMinType === '+') ? (item.quantity + 1) : (item.quantity - 1) 
            }
            doCartUpdate(params).then((res) => {
                if(res.data.status === 200){
                    this.listCartProduct(res)
                }
            })
        },
        changeCount($event, item){
            let params = {
                "productId": item.productId,
                "count": $event.target.value
            }
            doCartUpdate(params).then((res) => {
                if(res.data.status === 200){
                    this.listCartProduct(res)
                }
            })
        },
        allCheckedChange(){
            changeAllSelectedStatus({"checked": this.allChecked ? 1 : 0}).then((res) => {
                if(res.data.status === 200){
                    this.listCartProduct(res)
                }
            })
        },
        listCartProduct(res){
            this.allChecked = res.data.data.allChecked
            this.cartTotalPrice = res.data.data.cartTotalPrice
            this.cartProductDtoList = res.data.data.cartProductDtoList
            this.selectedProductIds = res.data.data.selectedProductIdList
        }
    }
}
</script>

<style scoped>

/* 面包屑导航 */
.crumb{
    margin-bottom: 15px;
    height: 50px;
    line-height: 50px;
    background: #eee;
    color: #888;
    font-size: 14px;
    border-top: 2px solid #c60023;
}
.cart-table{
    width: 100%;
    border-collapse: collapse;
    border: 1px solid #ebebeb;
    margin-bottom: 10px;
}
/* header */
.cart-header{
    background: #eee;
}
.cart-header .cart-cell{
    height: 40px;
    line-height: 40px;
}
.cart-table .cell-check{
    width: 6%;
    text-align: left;
    padding-left: 20px;
}
.cart-table .cell-img{
    width: 10%;
    text-align: left;
}
.cart-table .cell-img .p-img{
    margin: 10px 0;
    width: 80px;
    height: 80px;
    border: 1px solid #ddd;
}
.cart-table .cell-info{
    width: 35%;
    text-align: left;
}
.cart-header .cell-info{
    width: 45%;
    padding-left: 106px;
}
.cart-table .cell-price{
    width: 10%;
    text-align: center;
}
.cart-table .cell-count{
    width: 15%;
    text-align: center;
}
.cart-table .cell-count .count-input{
    width: 60px;
    height: 28px;
    line-height: 28px;
    border: 1px solid #ddd;
    text-align: center;
    vertical-align: middle;
    outline: none;
    color: #333;
}
.cart-table .cell-count .count-btn{
    display: inline-block;
    width: 20px;
    height: 28px;
    line-height: 28px;
    border: 1px solid #ddd;
    vertical-align: middle;
    cursor: pointer;
    background: #fff;
    -moz-user-select : none;
    -webkit-user-select : none;
    -ms-user-select : none;
    user-select : none;
}
.cart-table .cell-total{
    width: 14%;
    text-align: center;
    font-weight: bold;
}
.cart-table .cell-opera{
    width: 10%;
    text-align: center;
}

/* footer */
.cart-footer{
    position: relative;
    line-height: 50px;
    background: #eee;
    overflow: hidden;
}
.cart-footer .select-con{
    float: left;
    padding-left: 20px;
}
.cart-footer .delete-con{
    float: left;
    margin-left: 20px;
}
.cart-footer .submit-con{
    float: right;
}
.cart-footer .submit-con .submit-total{
    font-size: 18px;
    color: #c60023;
    font-weight: bold;
    margin-right: 30px;
    vertical-align: middle;
}
.cart-footer .submit-con .btn-submit{
    width: 80px;
    text-align: center;
    height: 50px;
    line-height: 50px;
}
/* 错误信息 */
.err-tip{
    height: 60px;
    line-height: 60px;
    color: #f60;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    background: #eee;
}
</style>